<!DOCTYPE html>
<html  class="x-admin-sm">
<#include "../layout/meta.ftl">
<body class="layui-layout-body">
<div style="margin: 2vw">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>Docker 容器列表</legend>
    </fieldset>
    <table class="layui-hide" id="project" lay-filter="project"></table>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="start">启动</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="stop">停止</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="term">容器终端</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script>
    //JavaScript代码区域
    layui.use(['element','table'], function(){
        let element = layui.element,table = layui.table;
        tableId=table.render({
            elem: '#project'
            ,url:'/docker/getContainerList'
            ,method:'get'
            ,contentType:'application/json'
            ,height:"full-110"
            ,cols: [[
                {field:'Id',  width: '20%', title: '容器Id',unresize:true,templet:function (data) {
                        return data.Id.substr(0,30)
                    }}
                ,{field:'Command', width: '25%', title: '命令',unresize:true}
                ,{field:'Status',  width: '20%', title: '状态',unresize:true}
                ,{field:'State', width: '15%', title: '运行状态',unresize:true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo',unresize:true}
            ]]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.message, //解析接口状态
                    "data": res.data, //解析数据列表
                    "count": res.data.total, //解析数据长度
                };
            },
            done: function (res, curr, count) {
                exportData=res.data;
            }
        });
        //监听工具条
        table.on('tool(project)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "start":projectDel("/docker/containerStart/"+data.Id,"是否启动");break;
                case "stop":projectDel("/docker/containerStop/"+data.Id,"是否停止");break;
                case "term":xadmin.open('容器'+data.Id,'/docker/terminal/'+data.Id,1200, 650);break;
                case "del":projectDel("/docker/containerDel/"+data.Id,"是否删除");break;
            }
        });
        function projectDel(url,msg) {
            layer.alert(msg,function () {
                $.ajax({
                    url:url,
                    type:"get",
                    success:function (res) {
                        layer.msg("操作成功", {icon: 1});
                        tableId.reload({
                            page: 1
                        });
                    }
                });
            });
        }


    });
</script>
</body>
</html>